<template>
  <div class="home">
     <div class="home-left">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="card-title">用户信息</span>
          </div>
        </template>
        <div class="userbox">
          <div><img src="~@/assets/img/gou.png" class="img" alt="" srcset=""></div>
          <div>
          
            <p>用户名：admin</p>
            <p>用户名：admin</p>
            <p>用户名：admin</p>
          </div>
        </div>
      

      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span class="card-title">数据信息</span>
            
          </div>
        </template>
       <div class="echarts" style="width: 550px;height: 380px">
                 <barCharts />
       </div>
      </el-card>
     </div>
     <div class="home-right">
      <el-card class="home-right-card">
        <template #header>
          <div class="card-header">
            <span class="card-title">右侧信息</span>
           
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
        <template #footer>Footer content</template>
      </el-card>
     </div>
  </div>
</template>
<script setup>
import barCharts  from "@/components/barCharts.vue"
</script>

<style lang="less" scoped>
.home{
  display: flex;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  // border: 1px solid #2fe10c;
  .home-left{
    flex: 2;
    display: flex;
    flex-direction: column;
    // background: pink;
    .box-card {
      flex:1;
    }
  }
  .home-right{
    flex: 3;
    margin-left: 10px;
    .home-right-card {
      width: 100%;
      height: 100%;
    }
  }
}
.card-title {
  font-size: 26px;

}
img {
  width: 100px;
  height: 100px;
}
.userbox {
  width: 100%;
  height: 100%;
  display: flex;
  div{
    flex:1;
  }
}

.echarts {
  width: 100%;
  height: 100%;
}
</style>